<template>
  <div class="main-container login-contain hoder-left" ref="loginHei">
    <div class="seperate-margin"></div>
    <mt-field placeholder="手机号码" type="tel" :disableClear=true :attr="{ maxlength: 11}"
              v-model="user.userPhone" @change="updateUserPhone" :state="validatePhone(user.userPhone)"
              prop="userName"></mt-field>
    <mt-field type="number" placeholder="验证码" :disableClear=true :attr="{ maxlength: 4 }" class="captcha-contain"
              v-model="user.captcha" @change="updateUserCaptcha" :state="validateCaptcha(user.captcha)">
      <mt-button type="primary" v-show="canGetCaptcha" @click="getCaptchaCode" class="code--get"
                 :disabled="getCaptchaDisable">获取验证码
      </mt-button>
      <timerTask :timerVisible="!canGetCaptcha" @limitCancel="timerCancel"></timerTask>
    </mt-field>
    <mt-button class="login-btn" type="primary" size="large" @click="login">登录</mt-button>
    <!--<PickerArea></PickerArea>-->
    <div id="box-one">
      <div id="p1"></div>
    </div>
  </div>
</template>
<script>
  import * as publicMethod from 'util/util';
  import {mapState, mapGetters, mapActions} from 'vuex';
  import {loginUd} from 'store/modules/types';
  import Schema from 'async-validator';
  import {validatePhoneNum} from 'util/asyncValidator'
  import {parseTime, isEmptyObject, isPhone} from 'util/lib/remex'
  import Storage from 'util/lib/storage'
  export default {
    data() {
      return {
        user: {
          userPhone: null,
          captcha: null
        },
        canGetCaptcha: true,
        getCaptchaDisable: true,
        address: {
          street: '123',
          city: '123',
          zip: ''
        }
      }
     },
     methods: {
      ...mapActions({
        'getPhone': loginUd.A.GET_PHONE,
        'getCaptcha': loginUd.A.GET_CAPTCHA,
        'quickLogin': loginUd.A.QUICK_LOGIN,
        'getAuthCode': loginUd.A.GET_AUTH_CODE,
      }),
      validatePhone(value) { //手机号实时格式校验
        if(!!value && isPhone(value.toString())) {
          this.getCaptchaDisable = false;
          return "success"
        }
      },
      validateCaptcha(value) { // 短信验证码实时校验
        if(!!value && value.toString().length == 4) {
          return "success"
        }
      },
      getCaptchaCode() {//获取短信验证码
        this.getAuthCode(this.user.userPhone).then( () => {
          this.canGetCaptcha = false;
        });
      },
      timerCancel(value) {//定时器结束
        this.canGetCaptcha = !!value ? true : false;
      },
      updateUserPhone(value) {
        this.getPhone(value);
      },
      updateUserCaptcha(value) {
        this.getCaptcha(value);
      },
      login() {
        const descriptor = {
          user: {
            type: "object", required: true,
            fields: {
              userPhone: {type: "string", validator: validatePhoneNum},
              captcha: {type: "string", required: true,message: '请输入格式正确的验证码'},
            }
          }
        }
        const validator = new Schema(descriptor);
        validator.validate({ user: this.user }, (errors, fields) => {
            if(errors) {
              let currMessage = errors[0].message;
              publicMethod.errorPrompt(currMessage);
              return ;
            }
            console.log('验证成功');
        });
        this.quickLogin(this.user);
      }
     },
     mounted() {
      this.$refs.loginHei.style.height = window.innerHeight + "px";//全屏被挤压修复
      console.log(parseTime(1510644935000))
      Storage.set('zhuce','local', 'session')
      /*for(let i=0;i<90000;i++) {
        insertEle()
      }*/
     },

  }
 /* function insertEle() {
    var oTest = document.getElementById("box-one");
    var newNode = document.createElement("div");
    var reforeNode = document.getElementById("p1");
    newNode.innerHTML = " This is a newcon ";
    oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入id为P1节点元素的后面。
  }*/
</script>
<style lang="scss" scoped>
  @import "./../../assets/sass/main";

  .seperate-margin {
    height: 1.6rem;
  }

  .login-contain {
    padding: 0 .7rem;
    background: url("http://aplus-img.img-cn-beijing.aliyuncs.com/20170607144409_m8OZ18MHeEFPxmwgPhk.png") no-repeat center bottom $bgWhite;
    background-size: contain;
  }

  .code--get {
    @include fontDpr(12px);
    height: .7rem;
    border-radius: .3rem;
  }

  .login-btn {
    margin-top: 1.5rem;
    height: .9rem;
    border-radius: .45rem;
  }

  .captcha-contain {
    margin-top: .5rem;
  }
</style>
